<template>

    <div class="video-list">
        <el-table :data="tableData?.items" stripe border>
            <el-table-column prop="id" show-overflow-tooltip label="ID" width="250"></el-table-column>
            <el-table-column prop="title" show-overflow-tooltip label="标题" width="380"></el-table-column>
            <el-table-column prop="length" show-overflow-tooltip label="时长" width="100"></el-table-column>
            <el-table-column prop="likedCount" show-overflow-tooltip label="点赞量" width="100"></el-table-column>
            <el-table-column prop="createTime" show-overflow-tooltip label="上线时间" width="180"></el-table-column>
            <el-table-column show-overflow-tooltip label="状态" width="100">
                <template #default="scope">
                    <el-tag v-if="!scope.row.deleted" type="success">上线</el-tag>
                    <el-tag v-else type="danger">下线</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template #default="scope">
                    <el-button type="primary" size="small" @click="updateVideoShow(scope.row.id,0)" v-if="scope.row.deleted">上线</el-button>
                    <el-button type="danger" size="small" @click="updateVideoShow(scope.row.id,1)" v-else>下线</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>


    <div class="pagination">
        <el-pagination layout="prev, pager, next" v-model:current-page="vdeoListParm.pageNo" :page-count="Number.parseInt(tableData?.page ?? '0')" @update:current-page="getVideoList()" />
    </div>
</template>

<script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import Video from '../../types/video/Video'
    import Page from '../../base/page'
    import VideoListParm from '@/types/video/VideoListParm'
    import request from '@/base/request';
    import { ElMessage } from 'element-plus';

    const buttonDisable=ref(false)

    const tableData = ref<Page<Video>>()
    const vdeoListParm=ref<VideoListParm>({
        pageNo:1,
        pageSize:10,
        authorId:-1
    })


    const getVideoList=async()=>{
        const response = (await request.post("/video/videoBaseInfo/getVideoInfoList",vdeoListParm.value)).data
        if(response.code!==200){
            ElMessage.error(response.msg)
        }else{
            tableData.value=response.data
        }
    }


    const updateVideoShow= async(id,deleted) =>{
        buttonDisable.value=true;
        try{
            const response = (await request.delete(`/video/videoBaseInfo/updateVideoShow/${id}/${deleted}`)).data
            if(response.code!==200){
                ElMessage.error(response.msg)
            }else{
                ElMessage.success("修改成功")
                getVideoList()
            }
        }catch(e){
            
        }finally{
            buttonDisable.value=false;
        }
        
        
    }


    onMounted(()=>{
        getVideoList()
    })
</script>

<style scoped>
    .video-list{
        margin-top: 10px;
    }



    .pagination{
        text-align: center;
        margin-left: 70vh;
    }

    :deep .el-table__row {
        height: 50px;
    }
</style>